<template>
	<view class="feedback-container">
		<u-row class="u-title-content" v-if="isAdmin">
			<u-col span="6" textAlign="center" @click="handleChange('1', '全部')">
				<view class="u-title-row">
					<view>
						<text class="u-title-text" :class="isActive == 1 ? 'u-title-text-active': ''">全部</text>
					</view>
				</view>
			</u-col>
			<u-col span="6" textAlign="center" @click="handleChange('2', '未处理')">
				<view class="u-title-row">
					<view style="position: relative;">
						<text class="u-title-text" :class="isActive == 2 ? 'u-title-text-active': ''">未处理</text>
						<u-badge numberType="overflow" type="error" :value="unProcessedCount" bgColor="#EA0000" class="u-demo-badge"></u-badge>
					</view>
				</view>
			</u-col>
		</u-row>
		<u-loading-icon v-if="loading"></u-loading-icon>
		<scroll-view v-else scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolowerFn" :class="['data-list', isAdmin ? 'admin-mode' : 'user-mode']">
			<view v-if="feedbackList && feedbackList.length > 0">
				<u-cell-group class="data-row" :border="false" v-for="(item, index) in feedbackList" :key="index">
					<view @click="handleDetail(item)">
						<u-cell class="data-row-first">
							<text slot="title" class="u-slot-title overflow">{{ item.feedbackContent }}</text>
						</u-cell>
						<u-cell title="提交人:">
							<text slot="value" class="u-slot-value overflow">{{ item.createByName }}</text>
						</u-cell>
						<u-cell title="提交时间:">
							<text slot="value" class="u-slot-value overflow">{{ item.createTime }}</text>
						</u-cell>
						<u-cell title="处理结果:" :border="false">
							<text slot="value" class="u-slot-value overflow">{{ item.processingResult }}</text>
						</u-cell>
					</view>
				</u-cell-group>
			</view>
			<view v-if="loadmore" class="loadMore">—已加载全部—</view>
			<image v-if="feedbackList && feedbackList.length == 0" src="../../../static/images/empty.svg" class="empty_img"></image>
		</scroll-view>
		<!-- <u-button class="createSession" type="primary" text="新建反馈" v-if="!isAdmin" @click="handleToAddFeedback()"></u-button>
		<u-button class="createSession" type="primary" text="导出问题详情单" v-if="isAdmin" @click="handleExport()"></u-button> -->
		<view class="button-container">
			<u-button 
				class="action-button" 
				type="primary" 
				:text="!isAdmin ? '新建反馈' : '导出问题详情单'" 
				@click="!isAdmin ? handleToAddFeedback() : handleExport()"
			></u-button>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			feedbackList: [],
			scrollTop: 0,
			pageNumber: 1,
			pageSize: 10,
			totalPage: 0,
			totalSize: 0,
			isActive: 1,
			unProcessedCount: 0,
			isAdmin: false,
			loadmore: false,
			loading: true,
			keyword: ''
		};
	},
	onShow() {
		this.pageNumber = 1
		this.pageSize = 10
		this.totalPage = 0
		this.totalSize = 0
		this.feedbackList = []
		this.getFeedbackList()
		this.getUserRole()
		this.getUnprocessed()
	},
	methods: {
		getUnprocessed() {
			this.$request({
			    url:'/feedback/unprocessed/count',
			    method:'get'
			}).then(({ data })=>{
				this.unProcessedCount = data
			})
		},
		getUserRole() {
			this.$request({
				url: "/user/adminRole",
				method: "get",
				params: {
					userId: uni.getStorageSync("user").id
				},
			}).then(({data}) => {
				this.isAdmin = data
			})
		},
		getFeedbackList() {
			this.$request({
				url: "/feedback/page",
				method: "get",
				params: {
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					keyword: this.keyword
				},
			}).then(({
				data
			}) => {
				this.totalPage = data.totalPage
				this.totalSize = data.totalSize
				this.loading = false
				if (data.data) {
					this.feedbackList = this.feedbackList.concat(data.data)
				}
			});
		},
		handleDetail(item) {
			this.$tab.navigateTo(`/pages/mine/feedback/detail?id=${encodeURIComponent(item.id)}`);
		},
		handleChange(value, key) {
			this.feedbackList = []
			this.pageNumber = 1
			this.pageSize = 10
			this.isActive = value
			this.keyword = key
			this.loading = true
			this.getFeedbackList()
		},
		// scroll 触底操作
		scrolltolowerFn(e) {
		  console.log("看看滚动条这个事件", e);
		  if (this.pageNumber >= this.totalPage) {
		    this.loadmore = true;
		    return;
		  }
		  this.pageNumber = this.pageNumber + 1;
		  if (this.pageNumber > this.totalPage) {
		  } else {
		    this.getFeedbackList();
		  }
		},
		handleToAddFeedback() {
			this.$tab.navigateTo('/pages/mine/feedback/add')
		},
		handleExport() {
			this.$request({
			    url: '/feedback/export',
			    method: 'get',
			    responseType: 'arraybuffer',
			  }).then(res => {
			    uni.hideLoading();
			    const blob = new Blob([res]);
			    const downloadUrl = URL.createObjectURL(blob);
			    const a = document.createElement('a');
			    a.href = downloadUrl;
			    a.download = '问题反馈列表.xlsx';
			    document.body.appendChild(a);
			    a.click();
			    document.body.removeChild(a);
			    URL.revokeObjectURL(downloadUrl);
			  }).catch(err => {
			    uni.hideLoading();
			    this.$toast('导出失败，请稍后再试');
			  });
		}
	},
}
</script>

<style lang="scss" scoped>
	.feedback-container {
		padding: 40rpx 30rpx 66rpx;
		.overflow {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.u-title-content {
			background: #FFF;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			.u-title-row {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.u-demo-badge {
					width: 36rpx;
					height: 36rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					line-height: 24rpx;
					padding: 0;
					position: absolute;
					top: 1px;
					right: -15px;
				}
			}
			.u-title-text {
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
				padding: 20rpx 22rpx;
			}
			.u-title-text-active {
				color: #016EFF;
				border-bottom: 4rpx solid #016EFF;
			}
		}
		.admin-mode {
			height: calc(100vh - 400rpx - env(safe-area-inset-bottom))
		}
		.user-mode {
			height: calc(100vh - 300rpx - env(safe-area-inset-bottom))
		}
		.data-list {
			margin-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
			overflow-y: auto;
			.data-row {
				font-size: 30rpx;
				display: flex;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 40rpx;
				color: #1C2126;
				.u-slot-value {
					color: #4C5A67;
					width: 70%;
					text-align: end;
				}
				.u-slot-title {
					color: #1C2126;
					text-align: left;
				}
			}
		}
		.button-container {
			position: fixed;
			bottom: calc(env(safe-area-inset-bottom) + 60rpx);
			left: 0;
			right: 0;
			padding: 20rpx 30rpx;
			padding-bottom: env(safe-area-inset-bottom); // 安全区域
			display: flex;
			justify-content: center;
			.action-button {
				width: 100%;
				height: 80rpx;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-weight: 600;
				background: #0084FF;
				::v-deep .u-button__text {
					font-weight: 600;
				}
			}
		}
		.createSession {
			z-index: 100;
			font-size: 32rpx;
			font-family: Poppins;
			font-weight: 600;
			border-radius: 16rpx;
			background: #0084ff;
			position: fixed;
			bottom: 60rpx;
		    left: 0;
		    right: 0;
			width: calc(100% - 60rpx);
			height: 80rpx;
		}
		.loadMore {
		  color: #b5b5b5;
		  line-height: 2;
		  font-size: 12px;
		  text-align: center;
		}
	}
</style>